<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>国内疫情</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<script src="http://cdn.zaixianke.com/china.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery-3.4.0.min.js"></script>
		<link type="text/css" rel="stylesheet" href=" css/new_file.css">
	</head>
	<body>
<!--		总数据展示-->
		<div class="shuju1">
			<div class="title1"><p><h3>国内疫情</h3></p></div>
			<div class="neirong">
				<div id="diyihang">
					<div class="xianyouquezhen">
						<div class="xianyouquezhen1">现有确诊</div>
						<div class="xianyouquezhen2"style="color: #ff6a57;" id="xianyouquezhen"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getUser",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									 res = JSON.stringify(res);
									var a=res.slice(11,-3);
									document.getElementById("xianyouquezhen").innerText=a;

								}
							})

						</script>
					</div>
					<div class="wuzhengzhuang">
						<div class="xianyouquezhen1">新增无症状</div>
						<div class="xianyouquezhen2"style="color: #e86d48;" id="xinzengwuzhengzhuang"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getWuzhengzhuang",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("xinzengwuzhengzhuang").innerText=a;
								}
							})

						</script>
					</div>
					<div class="xianyouyisi">
						<div class="xianyouquezhen1">新增本土</div>
						<div class="xianyouquezhen2"style="color: #ec9217;" id="xinzengbentu"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getXianyouyisi",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("xinzengbentu").innerText=a;
								}
							})

						</script>
					</div>
					<div class="xianyouzhongzheng">
						<div class="xianyouquezhen1">新增境外</div>
						<div class="xianyouquezhen2"style="color: #545499;" id="xinzengsiwang"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getXianyouzhongzheng",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("xinzengsiwang").innerText=a;
								}
							})

						</script>
					</div>
				</div>
				<div class="dierhang">
					<div class="xianyouquezhen">
						<div class="xianyouquezhen1">累计确诊</div>
						<div class="xianyouquezhen2"style="color: #e83132;" id="leijiquezhen"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getLeijiquezhen",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("leijiquezhen").innerText=a;
								}
							})

						</script>
					</div>
					<div class="wuzhengzhuang">
						<div class="xianyouquezhen1">新增确诊</div>
						<div class="xianyouquezhen2"style="color: #476da0;" id="xinzengjingwai"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getJingwaishuru",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("xinzengjingwai").innerText=a;
								}
							})

						</script>
					</div>
					<div class="xianyouyisi">
						<div class="xianyouquezhen1">累计治愈</div>
						<div class="xianyouquezhen2"style="color: #10aeb5;" id="leijizhiyu"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getLeijizhiyu",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("leijizhiyu").innerText=a;
								}
							})

						</script>
					</div>
					<div class="xianyouzhongzheng">
						<div class="xianyouquezhen1">累计死亡</div>
						<div class="xianyouquezhen2"style="color: #4d5054;" id="leijisiwang"></div>
						<script type="text/javascript">
							User={}
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								url:"http://localhost:8080/table/getLeijisiwang",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res) {
									console.log(res);
									res = JSON.stringify(res);
									var a=res.slice(11,-5);
									document.getElementById("leijisiwang").innerText=a;
								}
							})

						</script>
					</div>
				</div>

			</div>
		</div>
<!--		各个省市数据-->
		<div class="shuju2">
			<div class="shuju2_shuju">
				<div class="title1"><p><h3>疫情速递</h3></p></div>
				<div class="biao">
					<div class="biaotou">
						<div class="biaotou1">地区</div>
						<div class="biaotou2">现有病例</div>
						<div class="biaotou3">新增本土</div>
					</div>
					<div class="biao-shuju">
						<div class="biao-shuju1" id="name0"></div>
						<div class="biao-shuju2" id="value1_0"></div>
						<div class="biao-shuju2" id="value2_0"></div>
					</div>
					<script type="text/javascript">
						User={}
						var city=[];
						var value1=[];
						var value2=[];
						$.ajax({
							contentType:"application/json;charset=utf-8",
							type:"put",
							url:"http://localhost:8080/table/getshuju",
							data: JSON.stringify(User),
							dataType:"json",
							success:function(res) {
								console.log(res);
								for (var j=1;j< res.length;j++){
									a='<div class="biao-shuju">';
									a += '<div class="biao-shuju1" id="name' +j+ '"></div>';
									a += '<div class="biao-shuju2" id="value1_' +j+ '"></div>';
									a += '<div class="biao-shuju2" id="value2_' +j+ '"></div>';
									a += '</div>'
									$(".biao").append(a);
								}
								for (var i = 0; i < res.length; i++) {
									city[i] = res[i].name
									value1[i] = res[i].value1
									value2[i] = res[i].value2
									var a = city[i];
									var b = value1[i];
									var c = value2[i];
									document.getElementById("name"+i).innerText=a;
									document.getElementById("value1_"+i).innerText=b;
									document.getElementById("value2_"+i).innerText=c;
								}

							}
						})

					</script>
				</div>
				<div class="bottom-button">
					<button onclick="zhankai()">展开</button>
					<script>
						let x = document.getElementsByClassName("biao");
						function zhankai(){
							x.style.height = "auto";

						}
					</script>
				</div>
			</div>
		</div>
<!--		echarts 中国地图-->
		<div class="shuju3">
			<div id="box" style="width: auto; height: 600px;"></div>
			<script>
				// 初始化echarts实例
				var myEcharts = echarts.init(document.getElementById("box"));
				var dom = document.getElementById("box");
				var myChart = echarts.init(dom);

				var app = {};
				User={},
						$.ajax({
							contentType:"application/json;charset=utf-8",
							type:"put",
							async:false,
							url:"http://localhost:8080/table/getEchartschina",
							data: JSON.stringify(User),
							dataType:"json",
							success:function(res) {
								console.log(res);
								if (res) {
									myChart.setOption({
										title: {  //标题样式
											text: '现有确诊人数',
											x: "center",
											textStyle: {
												fontSize: 18,
												color: "red"
											},
										},
										tooltip: {  //这里设置提示框
											trigger: 'item',  //数据项图形触发
											backgroundColor: "red",  //提示框浮层的背景颜色。
											//字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
											formatter: '地区：{b}<br/>现有确诊人数：{c}'
										},
										visualMap: {//视觉映射组件
											top: 'bottom',
											left: 'left',
											min: 0,
											max: 1000,
											text: ['High', 'Low'],
											realtime: false,  //拖拽时，是否实时更新
											calculable: true,  //是否显示拖拽用的手柄
											inRange: {
												color: ['lightskyblue', 'yellow', 'orangered']
											}
										},
										series: [
											{
												name: '模拟数据',
												type: 'map',
												mapType: 'china',
												roam: false,//是否开启鼠标缩放和平移漫游
												itemStyle: {//地图区域的多边形 图形样式
													normal: {//是图形在默认状态下的样式
														label: {
															show: true,//是否显示标签
															textStyle: {
																color: "black"
															}
														}
													},
													zoom: 1.5,  //地图缩放比例,默认为1
													emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
														label: {show: true}
													}
												},
												top: "13%",//组件距离容器的距离
												data: res
											}
										]
									});
								}
							},
							error:function(errorMsg){
								alert("用户状态分析数据加载失败");
								myChart.hideLoading();
							}
						})
			</script>
		</div>
<!--		echarts 数据可视化-->
		<div class="shuju4">
			<ul class="nav">
				<li class="selected">各情况类型占比</li>
				<li>现有感染 省级TOP5</li>
			</ul>
			<div class="content">
				<div id="container" style="height: 400px" class="list"></div>

				<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
				<script type="text/javascript">
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);

					var app = {};
					User={},
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",
								async:false,
								url:"http://localhost:8080/table/getEchartsall",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res){
									console.log(res);
									if(res) {
										myChart.setOption({
											tooltip: {
												trigger: 'item'
											},
											legend: {
												orient: 'vertical',
												left: 'left',
											},
											series: [
												{

													type: 'pie',
													radius: '50%',
													data: res,
													emphasis: {
														itemStyle: {
															shadowBlur: 10,
															shadowOffsetX: 0,
															shadowColor: 'rgba(0, 0, 0, 0.5)'
														}
													}
												}
											]
										});
									}
								},
								error:function(errorMsg){
									alert("用户状态分析数据加载失败");
									myChart.hideLoading();
								}
							})
				</script>
				<div id="containers" style="height: 400px" class="list"></div>

				<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
				<script type="text/javascript">
					var dom = document.getElementById("containers");
					var myChart = echarts.init(dom);
					myChart.showLoading();
					var app = {};
					var names = []; //类别数组（实际用来盛放X轴坐标值）
					var nums = []; //销量数组（实际用来盛放Y坐标值）
					User={},
							$.ajax({
								contentType:"application/json;charset=utf-8",
								type:"put",

								url:"http://localhost:8080/table/getEcharts",
								data: JSON.stringify(User),
								dataType:"json",
								success:function(res){
									console.log(res);
									if(res) {
										for (var i = 0; i < res.length; i++) {
											names[i] = res[i].name
										}
										for (var i = 0; i < res.length; i++) {
											nums[i] = res[i].value
										}
										myChart.hideLoading()
										myChart.setOption({
											xAxis: {
												type: 'category',
												data: names
											},
											yAxis: {
												type: 'value'
											},
											series: [{
												data: nums,
												type: 'bar'
											}]
										});
									}
								},
								error:function(errorMsg){
									alert("用户状态分析数据加载失败");
									myChart.hideLoading();
								}
							})
				</script>
			</div>
			<script>
				$(function(){
					//获取点击事件的对象
					$(".nav li").click(function(){
						//获取要显示或隐藏的对象
						var divShow = $(".content").children('.list');
						//判断当前对象是否被选中，如果没选中的话进入if循环
						if (!$(this).hasClass('selected')) {
							//获取当前对象的索引
							var index = $(this).index();
							//当前对象添加选中样式并且其同胞移除选中样式；
							$(this).addClass('selected').siblings('li').removeClass('selected');
							//索引对应的div块显示
							$(divShow[index]).show();
							//索引对应的div块的同胞隐藏
							$(divShow[index]).siblings('.list').hide();
						}
					});
				});

			</script>
		</div>
	</body>
</html>
